<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Zone.js Basic Demo</title>
  <link rel="stylesheet" href="css/style.css">
  <script src="../dist/zone.js"></script>
  <script src="../dist/long-stack-trace-zone.js"></script>
</head>
<body>

  <h1>Basic Example</h1>

  <button id="b1">Bind Error</button>
  <button id="b2">Cause Error</button>

  <script>

  /*
   * This is a simple example of async stack traces with zones
   */

  function main () {
    b1.addEventListener('click', bindSecondButton);
  }

  /*
   * What if your stack trace could tell you what
   * order the user pushed the buttons from the stack trace?
   *
   * What if you could log this back to the server?
   *
   * Think of how much more productive your debugging could be!
   */

  function bindSecondButton () {
    b2.addEventListener('click', throwError);
  }


  function throwError () {
    throw new Error('aw shucks');
  }

  /*
   * Bootstrap the app
   */
  //main();
  Zone.current.fork(
          {
              onHandleError: function (parentZoneDelegate, currentZone, targetZone, error) {
                  console.log(error.stack);
              }
          }
  ).fork(Zone.longStackTraceZoneSpec).run(main);

  </script>
</body>
</html>